import React from 'react'
import {NavLink} from 'react-router-dom'
import './recordStyle.less'
import BattlePad from '../record/BattlePad2.tsx'
import WatchCode from '../record/WatchCode.tsx'
import { connect } from 'react-redux'

const mapStateToProps = (state) => {
  return {
    gameData: state.app.gameData
  }
}

class Records extends React.Component<any, any> {
  public constructor(props) {
    super(props)
    this.state = {
      showWatchCode: false
    }
  }

  public componentDidMount() {

  }

  public openBattlePage(gameData) {
    console.log('gameData', gameData);
    const toLink = `/BattleDetail/${gameData.gameType}/${gameData.gameName}`
    window.location.hash = encodeURI(toLink); // iPhone6 iOS 10.2.1上 hash值变化可能出问题
  }

  public render() {
    const {inviteId, tip} = this.state
    return <div className="view-page center-view">
      <div className="record-top text-center">
        {/* <img src="img/app/jiutian-hy-text.png" className="service-title animated infinite" alt="" /> */}
        <img onClick={() => this.setState({showWatchCode: true})} src="img/battle/look-label-1.png" className="look-label" alt="" />
      </div>
      <div className="record-middle-larger">
        <BattlePad gameClicked={this.openBattlePage.bind(this)}></BattlePad>
      </div>
      <div className="usercenter-bottom">
        <img className="bar-half" src="img/userCenter/records-bottom.png" alt=""/>
        <img className="user-bottom-bg" src="img/userCenter/user-bottom-bg.png" alt=""/>
        <NavLink to="/UserCenter"><img className="back" src="img/userCenter/user-back.png" alt=""/></NavLink>
      </div>
      {
        this.state.showWatchCode ? <WatchCode close={() => this.setState({showWatchCode: false})}></WatchCode> : null
      }
    </div>
  }

}

export default connect(mapStateToProps)(Records)